import React, { useState } from 'react';
import { ChevronLeft, Search, MapPin, Filter } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

const ExchangeMatch = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('recommend');
  
  return (
    <div className="flex flex-col h-full pb-16">
      {/* 头部 */}
      <div className="wx-header">
        <div className="wx-header-back" onClick={() => navigate('/')}>
          <ChevronLeft size={24} />
        </div>
        <div className="wx-header-title">交换匹配</div>
        <div className="wx-header-action">
          <Filter size={20} />
        </div>
      </div>
      
      <div className="wx-content">
        {/* 搜索框 */}
        <div className="p-3 bg-white">
          <div className="flex items-center bg-gray-100 rounded-full px-3 py-1.5">
            <Search size={18} className="text-gray-400 mr-2" />
            <input 
              type="text" 
              placeholder="搜索想要的物料" 
              className="bg-transparent border-none outline-none flex-1 text-sm"
            />
          </div>
        </div>
        
        {/* 标签页 */}
        <div className="bg-white border-b">
          <div className="flex">
            <div 
              className={`flex-1 text-center py-3 ${activeTab === 'recommend' ? 'text-green-500 border-b-2 border-green-500' : 'text-gray-600'}`}
              onClick={() => setActiveTab('recommend')}
            >
              推荐匹配
            </div>
            <div 
              className={`flex-1 text-center py-3 ${activeTab === 'nearby' ? 'text-green-500 border-b-2 border-green-500' : 'text-gray-600'}`}
              onClick={() => setActiveTab('nearby')}
            >
              同城交换
            </div>
            <div 
              className={`flex-1 text-center py-3 ${activeTab === 'national' ? 'text-green-500 border-b-2 border-green-500' : 'text-gray-600'}`}
              onClick={() => setActiveTab('national')}
            >
              全国交换
            </div>
          </div>
        </div>
        
        {/* 匹配列表 */}
        <div className="p-3 space-y-4">
          {[1, 2, 3, 4].map((item) => (
            <div key={item} className="bg-white rounded-lg shadow-sm p-3">
              <div className="flex">
                {/* 左侧：我的物料 */}
                <div className="flex-1 border-r pr-3">
                  <p className="text-xs text-gray-500 mb-1">我的物料</p>
                  <div className="aspect-square bg-gray-200 rounded mb-2"></div>
                  <p className="text-sm font-medium truncate">明星签名照片</p>
                  <div className="flex items-center text-xs text-gray-500 mt-1">
                    <MapPin size={12} className="mr-1" />
                    <span>北京</span>
                  </div>
                </div>
                
                {/* 右侧：匹配物料 */}
                <div className="flex-1 pl-3">
                  <p className="text-xs text-gray-500 mb-1">匹配物料</p>
                  <div className="aspect-square bg-gray-200 rounded mb-2"></div>
                  <p className="text-sm font-medium truncate">限量版周边手链</p>
                  <div className="flex items-center text-xs text-gray-500 mt-1">
                    <MapPin size={12} className="mr-1" />
                    <span>上海</span>
                    <span className="ml-2 text-green-500">匹配度：95%</span>
                  </div>
                </div>
              </div>
              
              {/* 操作按钮 */}
              <div className="flex justify-between mt-3 pt-3 border-t">
                <button className="wx-button-outline text-sm py-1 px-3 rounded-full">查看详情</button>
                <button className="wx-button text-sm py-1 px-3 rounded-full">申请交换</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ExchangeMatch;